<template>
	<view class="collection-setting">
		<view class="box">
			<view class="discount">
				<view class="discount-name">收款通道</view>
				<picker  mode="selector" :range="channelList" range-key="channel_name" @change="changeChannel">
					<view class="input picker-input" :class="{ 'color-tip': !channelTarget.channel_name }">
						{{channelTarget.channel_name || '请选择收款通道'}}
					</view>
				</picker>
			</view>			
		</view>
		<view class="box">
			<view class="discount">
				<view class="discount-name">商户号</view>
				<input type="text" class="input picker-input" v-model="mno" placeholder="请输入收款通道商户号"/>
			</view>
		</view>
		<view class="box">
			<view class="discount">
				<view class="discount-name">消费让利</view>
				<picker  mode="selector" :range="rateList" range-key="shop_rate" @change="changeRate">
					<view class="input picker-input">
						{{rateTarget.shop_rate || '请选择比例'}}
					</view>
				</picker>
				%
				<!-- <input class="input" type="text" v-model="discount" />% -->
			</view>
		</view>
		<view class="box support" v-for="(item,index) in support" :key="index">
			<view class="support-title">{{item.title}}</view>
			<radio-group :data-name="index" @change="changeSupport">
				<view class="">
					<view class="radio-row flex-left">
						<label>
							<radio :checked="item.check == 'true' ? true : false" value="true" /><text class="radio-text">支持</text>
						</label>
						<view class="flex-left proportion">支付占比<input class="input" type="number" v-model="item.value" />%
						</view>
					</view>
					<view class="radio-row">
						<label>
							<radio :checked="item.check == 'false' ? true : false" value="false" /><text class="radio-text">不支持</text>
						</label>
					</view>
				</view>
			</radio-group>
		</view>
		<button class="save-button" :disabled="saveDisabled" type="default" @click="saveShopReduct">保存</button>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				shopInfo:{},
				support: {
					// cashValue: {
					// 	title: '是否支持兑换券消费(最高100%)',
					// 	check: '',
					// 	value: ''
					// },
					// contributionValue: {
					// 	title: '是否支持数字资产消费(最高40%)',
					// 	check: '',
					// 	value: ''
					// }
				},
				rateId:'',
				rateList: [],
				rateTarget: {},
				channelList: [],
				shopPaychannel: [],
				channelTarget: {},
				channel: '',
				mno: ''
			}
		},
		computed: {
			saveDisabled() {
				if(!this.rateId){
					return true
				}
				for (let i in this.support) {
					let check = this.support[i].check
					if (!check) {
						return true
					} else if (check === 'true' && !this.support[i].value) {
						return true
					}
				}
		
				return false
			}
		},
		onLoad() {
			this.getReductInfo();
		},
		onShow() {
			if (!this.$util.checkToken('/pages/property/collection/collection-setting')) return;
		},
		methods: {
			changeSupport(e) {
				let name = e.currentTarget.dataset.name;
				this.support[name].check = e.detail.value;
			},
			changeRate(e) {
				let target = this.rateList[e.detail.value];
				this.rateTarget = target;
				this.rateId = target.rate_id;
			},
			changeChannel(e) {
				console.log(e)
				let target = this.channelList[e.detail.value];
				this.channelTarget = target;
				this.channel = target.channel;
				this.mno = this.shopPaychannel[target.channel] || '';
			},
			getReductInfo() {
				this.$api.sendRequest({
					url: '/collection/api/shop/getReductInfo',
					data: {},
					success: res => {
						this.shopInfo = res.data.shop_info;
						this.rateList = res.data.rate_list;
						this.rateId = res.data.shop_info.rate_id;
						this.rateTarget = res.data.rate_info;
						this.channelList = res.data.channel_list;
						this.shopPaychannel = res.data.shop_paychannel;
						this.mno = res.data.enable_paychannel ? res.data.enable_paychannel.mno : '';
						this.channel = res.data.enable_paychannel ? res.data.enable_paychannel.channel : '';
						this.channelTarget = this.channel ? this.channelList.find(item => item.channel == this.channel) : {};
						
						// this.support['contributionValue'].check = this.shopInfo.point_rate > 0 ? 'true' : 'false';
						// this.support['contributionValue'].value = this.shopInfo.point_rate > 0 ? this.shopInfo.point_rate : '';
						// this.support['cashValue'].check = this.shopInfo.account5_rate > 0 ? 'true' : 'false';
						// this.support['cashValue'].value = this.shopInfo.account5_rate > 0 ? this.shopInfo.account5_rate : '';
					}
				});
			},
			saveShopReduct() {
				this.$api.sendRequest({
						url: '/collection/api/shop/saveShopReduct',
						data: {
							channel: this.channel,
							mno: this.mno,
							rate_id: this.rateId,
							// point_rate: this.support['contributionValue'].check === 'true' ? this.support['contributionValue'].value : 0,
							// account5_rate: this.support['cashValue'].check === 'true' ? this.support['cashValue'].value : 0
						},
						success: res => {
							if (res.code >= 0) {
								this.$util.showToast({
									title: '保存成功'
								});
								setTimeout(()=>{
									this.$util.redirectTo('/pages/property/collection/index',{},'redirectTo');
								},2000);
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
						}
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($justify:center, $align:center, $direction:row) {
		display: flex;
		justify-content: $justify;
		align-items: $align;
		flex-direction: $direction;
	}

	@mixin font($fsize:32rpx, $color:#000, $lineHeight:45rpx) {
		font-size: $fsize;
		color: $color;
		line-height: $lineHeight;
	}

	.flex-between {
		@include flex(space-between);
	}

	.flex-left {
		@include flex(flex-start);
	}

	.collection-setting {}

	.box {
		margin: 20rpx 30rpx 24rpx;
		padding: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}

	.input {
		margin: 0 12rpx;
		width: 100rpx;
		border-bottom: 1rpx solid #909399;
		text-align: center;
	}
	.picker-input {
		width: 420rpx;
	}

	.discount {
		.discount-name {
			width: 120rpx;
		}
		@include flex(flex-start);
		@include font;

		.input {
			@include font(32rpx, #303133);
		}
	}

	.support {
		.support-title {
			@include font;
			margin-bottom: 30rpx;
		}

		.radio-row {
			margin-bottom: 48rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.radio-text,
			.proportion,
			.input {
				@include font(28rpx, #606266, 40rpx);
			}

			.radio-text {
				margin-left: 20rpx;
			}

			.proportion {
				margin-left: 102rpx;
			}
		}

	}

	.save-button {
		margin-top: 68rpx;
		margin-left: 30rpx;
		@include flex;
		width: 690rpx;
		height: 72rpx;
		background: #FF6A00;
		border-radius: 36rpx;
		@include font(28rpx, #fff, 40rpx);

		&::after {
			display: none;
		}

		&[disabled] {
			background: #E8E8E8;
			@include font(28rpx, #909399, 40rpx);
		}
	}
</style>
